<body>
<div id="page">
<div data-role="page" id="cusmain">
	<div data-role="header" class="cusmainheader" data-theme="e">

		<!-- ------------------Button for popup (defined below)-------------------------------- -->

		<a href="#menuPopup" data-type="button" data-rel="popup"
			data-icon="bars" data-iconpos="notext" data-position-to="left"> Menu </a>

		<div data-role="popup" id="menuPopup" data-transition="turn" data-shadow="false" data-corners="false" data-tolerance="0,0">
			<a href="#" data-rel="back" data-role="button" data-icon="delete"
				data-iconpos="notext" class="ui-btn-right">close</a>
			<ul data-role="listview" data-inset="true" data-corners="false">
				<li data-role="list-divider">
					<h1>Menu</h1>
				</li>
				<li><a id="curOrdersLink">Current Orders</a></li>
				<li><a id="orderHistLink">Order History</a></li>
				<li><a id="myCreditLink">My Credit</a></li>
				<li><a id="logOut">Log Out</a></li>

			</ul>
		</div>
		<h1>Smart Taxi</h1>
	<!--  	<a href="#" id="main-info-btn" data-typr="button" data-icon="grid" data-iconpos="notext">info</a> -->
	</div>
	
	<!-- header for order a driver -->
	<div data-role="header" data-theme="e" class="orderTaxi" >
		<a href="#" data-type="button" id="backToCusmain" data-icon="arrow-l" data-iconpos="left" data-position-to="left">Back</a>
		<h1>Smart Taxi</h1>
	</div>
	
	
	<div class="responseheader">
	 <div id="driverInfo">
			<div id="driverTextInfo">
				<h3 id="name"> Your Driver is: Samuel Lu </h3>

				<table >	<tr>
					<td class="emptyCol"></td>
					<td class="col1"><img src="../images/defaultPhoto.png" height="60px"/></td>

					<td class="col2"><span id="credit"> Credit: High </span> <br>
					<span> License: IS1593 </span> <br>

					<span> Car Color: Blue </span> <br></td>
					<td><a><img src="../images/microphone.png" height="60px" id="microphoto" data-state="stop"/></a></td>
				</tr></table>
			</div>

	</div>
	</div>
	<div class="orderTaxi" id="orderInputs">
		<input type="text" name="setupTime" id="slider_example_3" class="pencil-input" data-clear-btn="true" placeholder="Please input setup time"/>
		<input id="fromAddr" type="text" placeholder="Please input start address"
				class="pencil-input" data-clear-btn="true"/>
		<input id="toAddr" type="text" placeholder="Please input end address"
				class="pencil-input" data-clear-btn="true"/>
	</div>
	
	<div data-role="content" id="response">
		<fieldset>
			<div id="mapContainer" class="custMainMap"></div>
		</fieldset>
	</div>
	<div align="center" id="radioBackground" class="dispOptions">
		<div class="whitespace"></div>
		<fieldset id = "custMainRadio" data-type="horizontal" data-role="controlgroup" data-mini="true">
			<input type="radio" name="options" id="fastResponse" value="0" data-inline="true" checked="checked"/>
			<label for="fastResponse">Fastest Reply</label>
			<input type="radio" name="options" id="closest" value="1" data-inline="true" />
			<label for="closest">Closest Taxi</label>
		</fieldset>
	</div>		
	<div align="center" class="footer">
		<div class="cusmain">

			<a href="#" data-role="button" id="bookNowBtn" data-theme="e" data-inline="true" class="mainBtn">Book Now</a> 
				<a href="#" data-role="button" id="orderTaxiBtn" data-theme="e" data-inline="true" class="mainBtn">Order Taxi</a>
		</div>
		<div class="response">
				<a href="#" data-role="button" id="acceptBtn" data-theme="e" data-inline="true" class="mainBtn">Accept</a> 
				<a href="#" data-role="button" id="refuseBtn" data-theme="e" data-inline="true" class="mainBtn">Refuse</a>
		</div>
		<div class="orderTaxi submitButton">
				<a href="#" id="submitBtn" data-role="button" data-inline="true" data-theme="e" class="mainBtn">Submit</a> 
		</div>
	</div>
	<div data-role="popup" id="noOrderPopup" data-position-to="window">
		<div data-role="header"><h1>In Progress</h1></div>
		<div data-role="content">
			<p>Your current order is still in progress.</p>
			<a data-role="button" id="noOrderBtn" data-rel="back">OK</a>
		</div>
	</div>

	<div id="voicecontainer" class="hidden">
			<div class="left">
			  <img src="../images/defaultPhoto.png" width="40px" height="40px"><span class="triangle-border left">1</span>
			</div>
			<div class="right">
			 <span class="triangle-border right">2</span><img src="../images/defaultPhoto.png" width="40px" height="40px">
			</div>
			<div class="left">
			  <img src="../images/defaultPhoto.png" width="40px" height="40px"><span class="triangle-border left">1</span>
			</div>
			<a href="#" data-role="button" id="btn">voice</a>
	</div>
	<script src="../js/customer-main.js"></script>	

	<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="../css/jquery-ui-timepicker-addon.css" />
	
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-sliderAccess.js"></script>
	<script>
	
	$('#tabs').tabs();
	$('.example-container > pre').each(function(i){
		eval($(this).text());
	});
	
	$('#slider_example_3').datetimepicker({
			addSliderAccess: true,
			sliderAccessArgs: { touchonly: false }
	});
	</script>

	<script src="../js/loadmap.js"></script>
	<script src="../js/customer-main.js"></script>	
	</div>
	</div>
</body>

